<template>
  <div id='Home' v-if="!loading && !loadingTwo">
    <!-- 轮播图 -->
    <div class="slideshow">
      <ul class="slideshowArea" :style="`left:-${ amount * 100 }%;`">
        <router-link :to="item.typeTitle === '新歌首发' ||item.typeTitle === '热歌推荐'  ? `/song/${item.targetId}` : '' " tag="li" v-for="(item, i) in banners" :key="item.encodeId" :style="`left: ${ i * 100}%;`">
          <img :src="item.imageUrl" alt="">
          <span>{{ item.typeTitle }}</span>
        </router-link>
      </ul>
      <p>
        <span v-for="(item, i) in banners" :key="item.encodeId" :class="i === amount ? 'active' : ''" @click="setAmount(i);"></span>
      </p>
    </div>

    <!-- 推荐歌单标题 -->
    <div class="recommendedPlaylistTitle">推荐歌单</div>

    <!-- 推荐歌单 -->
    <div class="recommendedPlaylist">
      <router-link class="item" v-for="item in recommendedPlaylist" :key="item.id" :to="`/more/${item.id}`">
        <div class="recommendedImg">
          <img :src="item.picUrl" alt="">
        </div>
        <span>{{ item.name }}</span>
      </router-link>
    </div>
  </div>

  <Loading v-else></Loading>
</template>

<script>
import Loading from '@/views/loading/Loading.vue'

export default {
  data () {
    return {
      // 页面加载
      loading: true,
      loadingTwo: true,
      // 轮播图数组
      banners: [],
      // 推荐歌单数组
      recommendedPlaylist: [],
      // 当前张数
      amount: 1,
      // 设置节流阀
      flag: true
    }
  },
  components: {
    Loading
  },
  created () {
    // 页面加载
    this.loading = true
    this.loadingTwo = true

    // 获取轮播图数据
    this.$api.getSlideshow().then(res => {
      if (res.code === 200) {
        this.banners = res.banners

        // 页面加载完成
        this.loading = false
      }
    })

    // 获取推荐歌单数据
    this.$api.getRecommend().then(res => {
      if (res.code === 200) {
        // 推荐歌单数组
        this.recommendedPlaylist = res.recommend

        // 页面加载完成
        this.loadingTwo = false
      }
    })
  },
  methods: {

    // 点击小圆点
    setAmount (i) {
      // 把当前的下标记录下来
      this.amount = i;
      // 打开节流阀
      this.flag = true;

      // 判断小圆点的下标是否超出轮播图数组
      if (this.amount <= this.banners.length - 1) {
        // 如果没有，就开启定时器
        setTimeout(() => {
          this.flag = false;
          this.amount = i;
        }, 500);
      } else {
        // 如果超出了，直接进行跳转到开始下标
        this.flag = false;
        this.amount = 0;
      }
    }

  },
  mounted () {
    setInterval(() => {
      this.amount++
      this.setAmount(this.amount);
    }, 3000);
  },
}

</script>

<style lang='less' scoped>
// 轮播图
.slideshow {
  position: relative;
  width: 100vw;
  height: 37vw;
  overflow: hidden;

  // 图片
  .slideshowArea {
    position: absolute;
    left: -0%;
    width: 100%;
    height: 100%;
    transition: all 0.3s;

    li {
      position: absolute;
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        background-color: #efefef;
      }

      span {
        position: absolute;
        left: 10vw;
        bottom: 0;
        width: 18vw;
        height: 5vw;
        line-height: 5vw;
        font-size: 2vw;
        text-align: center;
        border-radius: 2.5vw 2.5vw 0 0;
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
      }
    }
  }

  // 小圆点
  p {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, -50%);

    span {
      display: block;
      width: 2vw;
      height: 2vw;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.3);
      margin-right: 1vw;

      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      background-color: #fff;
    }
  }
}

// 推荐歌单标题
.recommendedPlaylistTitle {
  width: 100vw;
  height: 10vw;
  line-height: 10vw;
  padding: 0 5vw;
  box-sizing: border-box;
  font-size: 4vw;
}

// 推荐歌单
.recommendedPlaylist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;

  // 推荐歌单
  .item {
    width: 30vw;
    margin-bottom: 5vw;

    .recommendedImg {
      width: 30vw;
      height: 30vw;

      img {
        width: 100%;
        height: 100%;
        background-color: #efefef;
      }
    }

    span {
      margin-top: 1vw;
      font-size: 3vw;
      line-height: 5vw;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      // 下面这句用来控制行数
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
